<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </div>

            <!--列表-->
            <el-table :data="tableData" highlight-current-row   max-height="700" v-loading="listLoading"
                      style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column
                    prop="account"
                    label="账号"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="电话"
                >
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="性别"
                    :formatter="function(row,column) {
					  let a=row.sex
					  if(a==='1'){
						return '男';
					  }else{
						return '女';
					  }

					}"
                >
                </el-table-column>


                <el-table-column label="操作" width="150">
                    <template scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="pageSize"
                    :current-page="pageNo"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :total="total" style="float:right;">
                </el-pagination>
            </div>
        </div>





    </div>
</template>

<script>
    import axiosHttpUtil from '../service/axiosHttpUtil.js'
    import serviceApi from '../service/serviceApi.js'


    export default {
        data() {
            return {

                tableData: [],
                total: 0,
                pageSize: 10,
                pageNo: 1,
                listLoading: true,
                sels: [],//列表选中列
                nameFlag:true,
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    url: [
                        {required: true, message: '请输入访问地址', trigger: 'blur'}
                    ]
                },


            }
        },
        created() {
            this.getLogList(this.pageNo, this.pageSize);
        },
        methods: {

            //获取用户列表
            getLogList(pageNo, pageSize,name,url) {
                var _this = this;
                axiosHttpUtil(serviceApi.userList,{
                    pageNo:pageNo,
                    pageSize:pageSize
                }).then((res)=>{
                    if( res.status === 200){
                        setTimeout(function(){
                            _this.listLoading=false
                        },1000);
                        _this.tableData = res.data.data;
                        _this.total = res.data.total;
                        _this.listLoading=true;
                        this.$message.success('查询成功');
                    }else {
                        this.listLoading=false;
                        this.$message.error('查询失败');
                    }

                },(error)=>{
                    console.log(error)
                })

            },
            //点击页码事件
            handleCurrentChange(pageNo) {
                this.getLogList(pageNo, this.pageSize)
            },
            //改变分页大小事件
            handleSizeChange(pageSize) {
                this.getLogList(this.pageNo, pageSize)
            },
            handleAdd(){

            },
            batchRemove(){

            }

        }

    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    }
</style>
